<template>
  <div class="user-role">
    <SelectTitle select-title="选择角色身份" />
    <div class="list-content">
      <div>
        <ul>
          <li v-for="(role, index) in roleList" :key="index">
            <div @click="selectRole(role)">
              <div class="icon-content">
                <img mode="widthFix" :src="role.icon" />
              </div>
              <div class="role-name"><p v-text="role.name" /></div>
              <div class="select-content">
                <div class="circle" :class="{ active: selectData && selectData.value === role.value }">
                  <div class="icon" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import SelectTitle from './SelectTitle';
  
  export default {
    name: 'UserRole',
    components: {
      SelectTitle,
    },
    props: {},
    data() {
      return {
        roleList: [
          // 1-规上企业，2-中小微企业，3-个体工商户，4-自然人
          { icon: require('../../../static/images/user-role/seller.png'), name: '我是规上企业', value: '1' },
          { icon: require('../../../static/images/user-role/seller.png'), name: '我是中小微企业', value: '2' },
          { icon: require('../../../static/images/user-role/seller.png'), name: '我是个体工商户', value: '3' },
          { icon: require('../../../static/images/user-role/human.png'), name: '我是自然人', value: '4' },
        ],
        selectData: null,
      };
    },
    computed: {},
    watch: {
      selectData: {
        handler(value) {
          this.$emit('select-change', { data: value });
        },
      },
    },
    mounted() {
    },
    created() {
    },
    methods: {
      selectRole(role) {
        this.selectData = role;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .user-role {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .list-content {
      flex: 1;
      overflow: hidden;
      padding: 15px 0;
      > div {
        height: 100%;
        overflow: auto;
        padding: 0 15px;
        ul {
          li {
            > div {
              background-color: white;
              border-radius: 10px;
              display: flex;
              padding: 15px 20px;
              align-items: center;
              .icon-content {
                img {
                  width: 50px;
                  display: block;
                }
              }
              .role-name {
                flex: 1;
                margin: 0 15px;
              }
              .select-content {
                .circle {
                  display: flex;
                  flex-shrink: 0;
                  box-sizing: border-box;
                  justify-content: center;
                  align-items: center;
                  position: relative;
                  width: 16px;
                  height: 16px;
                  border: 1px solid #dcdfe6;
                  border-radius: 16px;
                  background-color: #fff;
                  z-index: 1;
                  transition: all 0.2s;
                  .icon {
                    transition: all 0.2s;
                    opacity: 0;
                    position: absolute;
                    top: 1px;
                    left: 5px;
                    height: 8px;
                    width: 4px;
                    border-right: 1px solid #fff;
                    border-bottom: 1px solid #fff;
                    transform-origin: center;
                    transform: rotate(40deg);
                  }
                  &.active {
                    background-color: #4caa79;
                    border-color: #4caa79;
                    .icon {
                      opacity: 1;
                    }
                  }
                }
              }
            }
            & + li {
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
</style>
